<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>欢迎首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link id="link_" rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link class="link_" rel="stylesheet" href="../../layuiadmin/layui/css/admin.css" media="all">
    <link class="link_" rel="stylesheet" href="../../css/custom.css" media="all">
    <link class="link_" rel="stylesheet" href="../../css/select2.css" media="all">
    <!-- <script>
        top.layui.each(top.layui.$('link'), function (index, item) {
            if (item.href.includes("layui.css") || item.href.includes("admin.css") || item.href.includes("custom.css")) {
                var oLi = document.createElement("link");
                oLi.rel = "stylesheet", oLi.href = decodeURIComponent(item.href), oLi.media = "all";
                var ul = document.getElementsByTagName("head")[0].appendChild(oLi)
            }
        })
    </script> -->
    <style>
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }
    </style>
</head>

<body>
    <span class="layui-breadcrumb">
        <a href="#">首页</a>
        <a href="#">表单布局</a>
        <a><cite>常用的表单样式</cite></a>
    </span>
    <!-- 常用的表单样式 -->
    <div class="layui-card tab_form_card layui-form forceForm-item ">
        <div class="layui-card-header">
            <h3 name="guid">常用的表单样式</h3>
        </div>
        <div class="layui-card-body" pad15>
            <form class="layui-form" lay-filter="form-body">
                <div class="layui-form-item">
                    <div class="layui-row myrow_item">

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    输入框
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="input" name="input" placeholder="这是一个输入框" autocomplete="off"
                                        class="layui-input"></input>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    文本域
                                </label>
                                <div class="layui-input-inline layui-col-md9">
                                    <textarea id="textarea" name="textarea" placeholder="文本域" class="layui-input"
                                        autocomplete="off"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm12 layui-col-xs12 layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    文本域
                                </label>
                                <div class="layui-input-inline double">
                                    <textarea id="textarea" name="textarea" placeholder="文本域" class="layui-input"
                                        autocomplete="off"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    辅助文字
                                </label>
                                <div class="layui-input-inline layui-col-md9">
                                    <textarea id="textarea" name="textarea" placeholder="文本域" class="layui-input"
                                        autocomplete="off"></textarea>
                                </div>
                                <div class="layui-form-mid layui-word-aux">辅助文字</div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    数字输入框
                                </label>
                                <div class="layui-input-inline">
                                    <input type="number" id="number" name="number" placeholder="这是一个数字输入框"
                                        autocomplete="off" class="layui-input"></input>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">选择框</label>
                                <div class="layui-input-inline">
                                    <select name="city" lay-verify="required">
                                        <option value="">选择框要form模块的支持</option>
                                        <option value="0">北京</option>
                                        <option value="1">上海</option>
                                        <option value="2">广州</option>
                                        <option value="3">深圳</option>
                                        <option value="4">杭州</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label from-lable">
                                    默认时间选择框
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="DateTime" name="DateTime" laydatetime placeholder="请输入更新时间"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label from-lable">
                                    日期选择框
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="DateTime" name="DateTime" laydate placeholder="请输入更新时间"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3  layui-col-lg3">
                            <div class="layui-form-item">
                                <label class="layui-form-label from-lable ">
                                    操作按钮
                                </label>
                                <div class="layui-input-inline">
                                    <input type="number" id="UpdateDateTime" name="UpdateDateTime" placeholder="请输入操作费"
                                        autocomplete="off" class="layui-input" lay-key="7">
                                </div>
                                <div class="layui-form-mid layui-word-aux">
                                    <div class="layui-btn-group flex">
                                        <button type="button" class="layui-btn layui-btn-xs layui-btn-primary">
                                            <i class="layui-icon layui-icon-form" style="margin: 0; "></i>
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-xs layui-btn-primary">
                                            <i class="layui-icon layui-icon-engine" style="margin: 0; "></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">复选框</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="like[write]" title="写作" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">复选框</label>
                                <div class="layui-input-inline">
                                    <!-- <input type="checkbox" name="like[write]" title="写作" class="layui-input"> -->
                                    <input type="checkbox" name="" title="发呆" lay-skin="primary">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">开关</label>
                                <div class="layui-input-inline" style="padding-bottom:8px;">
                                    <input type="checkbox" name="switch" lay-skin="switch" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">开关里的说明</label>
                                <div class="layui-input-inline" style="padding-bottom:8px;">
                                    <input type="checkbox" class="layui-input" name="switch" lay-skin="switch"
                                        lay-text="开启|关闭">
                                </div>
                            </div>
                        </div>
                        
                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label white-space-nowrap">长的说明不换行</label>
                                <div class="layui-input-inline" style="padding-bottom:8px;">
                                    <input type="checkbox" class="layui-input" name="switch" lay-skin="switch"
                                        lay-text="开启|关闭">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">

                                <label class="layui-form-label from-lable" style="height: 38px;">
                                    <input type="radio" lay-filter="curType" id="a" name="radioOnTo" value="a" title=""
                                        lay-skin="primary" class="layui-input">
                                    <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
                                        <div></div>
                                    </div>
                                </label>
                                <div class="layui-input-inline"
                                    style="height: 38px;display: flex; align-items: center; padding: 9px 0;">
                                    选择在前，说明在后
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <div class="layui-form-label from-lable" style="height: 38px;">
                                    <input type="checkbox" name="isSaveGood2" lay-skin="switch" class="layui-input">
                                </div>
                                <div class="layui-input-inline"
                                    style="height: 38px;display: flex; align-items: center; padding: 9px 0;">
                                    选择在前，说明在后
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="setmypass">确认修改</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" lay-submit lay-filter="setmypass">确认修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 其他技巧  ========================================================================================================================================-->
    <div class="layui-card tab_form_card layui-form forceForm-item ">
        <div class="layui-card-header">
            <h3 name="guid">其他技巧</h3>
        </div>
        <div class="layui-card-body" pad15>
            <form class="layui-form" lay-filter="form-body2">
                <div class="layui-form-item">
                    <div class="layui-row myrow_item">

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    必填
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="input" name="input" lay-verify="required"
                                        placeholder="这是一个输入框" autocomplete="off" class="layui-input"></input>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    只读
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="input" name="input" disabled placeholder="这是一个只读框"
                                        autocomplete="off" class="layui-input"></input>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3 ">
                            <div class="layui-form-item">
                                <label class="layui-form-label from-lable">
                                    提示
                                    <i class="layui-icon layui-icon-tips" lay-tips="默认=提单重量，请按实际情况录入"></i>
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="BulkyWt_" name="BulkyWt" placeholder="提示" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label from-lable">
                                    提示2
                                </label>
                                <div class="layui-input-inline">
                                    <input type="number" id="UnPass" name="UnPass" placeholder="提示2" autocomplete="off"
                                        class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">
                                    <i class="layui-icon layui-icon-help" lay-tips="0=继续执行，1=不在执行其他规则，2=跳转到指定规则"></i>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3 ">
                            <div class="layui-form-item" style="height:38px;">
                                <label class="layui-form-label from-lable">
                                    合同号
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" id="CusContractNo" name="CusContractNo" placeholder="请输入合同号"
                                        autocomplete="off" class="layui-input hetong"
                                        style="width: 87%;display: inline-block;">
                                    <div
                                        style="width: 7%;display: inline-block;height: 38px;position: relative; top: -1px;right: -2px;">
                                        <i class="layui-icon layui-icon-component" title="生成临时合同号"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3 ">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    原始select2
                                </label>
                                <div class="layui-input-inline">
                                    <select lay-ignore id="CusStatus2" name='CusStatus2'>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3 ">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    封装select2
                                </label>
                                <div class="layui-input-inline">
                                    <select lay-ignore id="CusStatus" name='CusStatus'>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="setmypass">确认修改</button>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" lay-submit lay-filter="setmypass">确认修改</button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="uploadsBtn">选择上传Excel文件</button>
                        <button type="button" class="layui-btn" lay-submit lay-filter="matchBtn">匹配税号</button>
                        <button type="button" class="layui-btn" lay-submit lay-filter="matchVagueBtn">匹配税号(模糊)</button>
                        <button type="button" class="layui-btn" lay-submit lay-filter="setmypass">提交保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="../../js/jquery.3.5.1.js"></script>
    <script src="../../js/select2.js"></script>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/modules/layui_ext.js"></script>
    <script>
        layui.config({
            base: '../../layuiadmin/'
        }).extend({
            index: 'lib/index', //主入口模块
            select2: 'modules/select2', //主入口模块
        }).use(['jquery', 'form', 'laydate', 'element', 'select2'], function () {
            var $ = layui.jquery
            var form = layui.form
            var laydate = layui.laydate
            var select2 = layui.select2

            // 初始化select2
            $("#CusStatus2").select2({
                placeholder: '请选择',
                allowClear: true,
                width: '100%',
                data: [
                    {
                        "id": '',
                    },
                    {
                        "id": 1,
                        "text": "Option 1"
                    },
                    {
                        "id": 2,
                        "text": "Option 2"
                    }
                ]
            })
            select2.open('#CusStatus', {
                url: './select2Data.json',
                method: 'get',
                selected: [
                    {
                        defaultId: 112,
                        defaultValue: '这是默认选中值'
                    }
                ],
                data: {
                    DictTypeCode: 'CusInfo'
                },
                valueField: 'DictCode',
                textField: 'DictConfigName',
            })

            init();  // 全局初始化
        })
    </script>
</body>

</html>